<template>
  <div class="fans-container">
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- tabs组件 -->
      <el-tabs v-model="activeName" type="card" @tab-click="hfanstu">
        <el-tab-pane label="粉丝列表" name="list">
          <!-- 列表 -->
          <div class="fans_list">
            <div class="fans_item" v-for="item in list" :key="item.id.toString()">
              <el-avatar :size="80" :src="item.photo"></el-avatar>
              <p>{{item.name}}</p>
              <el-button type="primary" plain size="small">+关注</el-button>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="per_page"
            @current-change="changePage"
            :total="total">
          </el-pagination>
        </el-tab-pane>

        <el-tab-pane label="粉丝画像" name="img">
          <div ref="main" style="width: 600px;height:400px;"></div>
        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getFansList, getFansportrayal } from '@/api/fans'
import echarts from 'echarts'
export default {
  name: 'my-fans',
  data () {
    return {
      // tabs的当前激活选项卡的name属性值
      activeName: 'list',
      per_page: 20,
      page: 1,
      list: [],
      total: 0,
      dataY: [],
      dataX: []
    }
  },
  methods: {
    hfanstu (tab) {
      if (tab.name === 'img') {
        getFansportrayal().then(res => {
          console.log(res)
          this.dataX = Object.keys(res.data.data.age)
          this.dataX.forEach((item, index, arr) => {
            arr[index] = item.replace('le', '< ').replace('gt', '> ')
          })
          this.dataY = Object.values(res.data.data.age)
          this.fanstu()
        })
      }
    },
    fanstu () {
      var myChart = echarts.init(this.$refs.main)
      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: 'category',
          // X轴数据项
          data: this.dataX
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          // Y轴数据项
          data: this.dataY,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    hgetFansList () {
      const params = {
        page: this.page,
        per_page: this.per_page
      }
      getFansList(params).then(res => {
        this.list = res.data.data.results
        this.total = res.data.data.total_count
      })
    },
    changePage (curpage) {
      this.page = curpage
      this.hgetFansList()
    }
  },
  mounted () {
    this.hgetFansList()
  }
}
</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>
